<style>
	.amap-wrapper {
		width: 900px;
		height: 600px;
	}
	
	.amap-demo {
		height: 100px;
	}
</style>
<template>
	<div>
		<Modal v-model="modalShow" :closable='false' :mask-closable=false fullscreen>
			<p slot="header">添加网点</p>
			<Row>
				<Col span="16">
				<Form ref="formData" :model="formData" label-position="left" :label-width="100">
					<FormItem label="网点名称" prop="dot_name">
						<Input v-model="formData.dot_name" />
					</FormItem>

					<FormItem label="位置" prop="">
						<Button type="primary" @click="mapModal = true"><span v-if="formData.lon">已选择</span><span v-else>请选择</span></Button>
						<Modal width="1000" height="1000" v-model="mapModal" title="位置选择" @on-ok="mapModelOk" @on-cancel="mapModelCancel">
							<div class="amap-wrapper">
								<el-amap-search-box vid="amap" class="search-box" :on-search-result="onSearchResult"></el-amap-search-box>
								<el-amap vid="amap" :plugin="mapData.plugin" class="amap-demo" :center="mapData.center" :zooms="mapData.zooms" :events="mapData.events">
									<el-amap-marker vid="amap" :position="mapData.center"></el-amap-marker>
								</el-amap>
								<div class="toolbar">
									position: [{{ mapData.lon }}, {{ mapData.lat }}] address: {{ mapData.dot_address }}
								</div>
							</div>
						</Modal>
					</FormItem>

					<FormItem label="详细地址" prop="dot_address">
						<Input v-model="formData.dot_address" />
					</FormItem>

					<FormItem label="位置范围" prop="" v-if="formData.lon">
						<Button type="primary" @click="map2()"><span v-if="formData.point_list">已选择</span><span v-else>请选择</span></Button>
						<Modal width="1000" height="1000" v-model="mapModal1" title="位置选择" @on-ok="mapModelOk1" @on-cancel="mapModelCancel1">
							<div class="amap-wrapper">
								<el-amap vid="amap1" class="amap-demo" :center="mapData.center" :zooms="mapData.zooms1" :events="mapData.events1">
									<el-amap-marker vid="amap1" v-for="marker in mapData.point_list" :position="marker"></el-amap-marker>
								</el-amap>
								<div class="toolbar">
									position: [{{ mapData.lon }}, {{ mapData.lat }}] address: {{ mapData.dot_address }}
								</div>
							</div>
						</Modal>
					</FormItem>

					<FormItem label="服务电话" prop="dot_tel">
						<Input v-model="formData.dot_tel" />
					</FormItem>

					<FormItem label="开始营业时间" prop="do_status_time">
						<TimePicker format="HH:mm" v-model="formData.do_status_time"></TimePicker>
					</FormItem>

					<FormItem label="结束营业时间" prop="do_end_time">
						<TimePicker format="HH:mm" v-model="formData.do_end_time"></TimePicker>
					</FormItem>

					<FormItem label="火车站/高铁站附近：">
						<i-switch v-model="formData.is_tra" :true-value="1" :false-value="-1" />
					</FormItem>

					<FormItem label="机场附近：">
						<i-switch v-model="formData.is_air" :true-value="1" :false-value="-1" />
					</FormItem>

					<FormItem label="客运站附近：">
						<i-switch v-model="formData.is_pas" :true-value="1" :false-value="-1" />
					</FormItem>

					<FormItem label="婚庆车辆：">
						<i-switch v-model="formData.is_wed" :true-value="1" :false-value="-1" />
					</FormItem>

				</Form>
				</Col>
			</Row>

			<div slot="footer">
				<Button type="text" @click="cancel">取消</Button>
				<Button type="primary" @click="add" :loading='saveLoading'>保存 </Button>
			</div>
		</Modal>

	</div>
</template>
<script>
	import {
		addDot,
		checkDot
	} from '@/api/dot'

	//import Editor from '_c/editor'
	//import Upload from '_c/common/upload'
	export default {
		components: {
			//  Editor,
			//  Upload
		},
		data() {
			let t = this;
			return {
				modalShow: true,
				saveLoading: false,
				mapModal: false,
				mapModal1: false,
				formData: {
					dot_name: '',
					lon: 0,
					lat: 0,
					point_list: '',
					dot_address: '',
					dot_tel: '',
					do_status_time: '',
					do_end_time: '',
					is_tra: -1,
					is_air: -1,
					is_pas: -1,
					is_wed: -1
				},
				//地图
				mapData: {
					center: [121.59996, 31.197646],
					zooms: [16, 20],
					zooms1: [20, 20],
					lon: 0,
					lat: 0,
					dot_address: '',
					point_list: [],
					//中心
					events: {
						click(e) {

							t.mapData.lon = e.lnglat.lng;
							t.mapData.lat = e.lnglat.lat;
							t.mapData.center = [t.mapData.lon, t.mapData.lat];
							// 这里通过高德 SDK 完成。
							var geocoder = new AMap.Geocoder({
								radius: 1000,
								extensions: "all"
							});
							geocoder.getAddress([t.mapData.lon, t.mapData.lat], function(status, result) {
								if(status === 'complete' && result.info === 'OK') {
									if(result && result.regeocode) {
										t.mapData.dot_address = result.regeocode.formattedAddress;
										t.$nextTick();
									}
								}
							});
						}
					},
					//范围
					events1: {
						click(e) {
							t.mapData.point_list.push([e.lnglat.lng, e.lnglat.lat]);

						}
					},
					plugin: [{
						pName: 'Geolocation',
						events: {
							init(o) {
								// o 是高德地图定位插件实例
								o.getCurrentPosition((status, result) => {
									if(result && result.position) {
										t.mapData.lon = result.position.lng;
										t.mapData.lat = result.position.lat;
										t.mapData.center = [t.mapData.lon, t.mapData.lat];

										// 这里通过高德 SDK 完成。
										var geocoder = new AMap.Geocoder({
											radius: 1000,
											extensions: "all"
										});
										geocoder.getAddress([t.mapData.lon, t.mapData.lat], function(status, result) {
											if(status === 'complete' && result.info === 'OK') {
												if(result && result.regeocode) {
													t.mapData.dot_address = result.regeocode.formattedAddress;
													t.$nextTick();
												}
											}
										});
									}
								});
							},
						}
					}]
				}

			}
		},
		methods: {
			mapModelOk() {
				//清空范围
				this.mapData.point_list = [];
				//赋值
				this.formData.lon = this.mapData.lon;
				this.formData.lat = this.mapData.lat;
				this.formData.dot_address = this.mapData.dot_address;
				this.$Message.info('选择网点中心点成功');
			},
			mapModelCancel() {
				this.$Message.info('取消');
			},
			mapModelOk1() {

				//删除第一个进行检测
				this.mapData.point_list.forEach((item, index) => {
					if(JSON.stringify(item) == JSON.stringify([this.mapData.lon, this.mapData.lat])) {
						this.mapData.point_list.splice(index, 1);
					}
				})

				//console.log(JSON.stringify(this.mapData.point_list));

				let point_list_arr = [];
				this.mapData.point_list.forEach((item, index) => {
					point_list_arr.push({
						'lon': item[0],
						'lat': item[1]
					});
					//point_list_arr[index].log = 1;
				})

				//网点检测           
				checkDot(this.formData.lon, this.formData.lat, point_list_arr).then(res => {
					if(res.data.code == 1) {
						//赋值
						this.formData.point_list = JSON.stringify(point_list_arr);
						this.$Message.info('选择网点范围成功');
					} else {
						this.$Notice.error({
							title: res.data.msg
						})
					}
				})

			},
			mapModelCancel1() {
				this.mapData.point_list = [];
				this.$Message.info('取消');
			},
			add() {
				let t = this
				t.$refs.formData.validate((valid) => {
					if(valid) {
						t.saveLoading = true
						//console.log(JSON.stringify(t.formData));
						addDot(t.formData).then(res => {
							if(res.data.code == 1) {
								t.saveLoading = false
								t.modalShow = false
								t.$emit('on-add-modal-success')
								t.$emit('on-add-modal-hide')
								t.$Notice.success({
									title: res.data.msg
								})
							} else {
								t.saveLoading = false
								t.$Notice.error({
									title: res.data.msg
								})
							}

						}, function(error) {
							t.saveLoading = false
						})
					}
				})
			},
			cancel() {
				this.$emit('on-add-modal-hide')
				this.modalShow = false
			},
			onSearchResult(pois) {

				if(pois.length > 0) {
					pois.forEach(poi => {
						this.mapData.lon = poi.lng;
						this.mapData.lat = poi.lat;
						this.mapData.dot_address = poi.address;
						this.mapData.center = [this.mapData.lon, this.mapData.lat];
					});
				}
			},
			//弹窗前
			map2() {
				this.mapModal1 = true;
				this.mapData.point_list.push([this.mapData.lon, this.mapData.lat]);
			}

		},

	}
</script>